Trening Shiny App repopsi

Tijana Blagojev - EUI/R-Ladies Belgrade
Duško Medić - Centar za održive zajednice

Cilj treninga

  • Da se upoznamo sa osnovama Shiny aplikacije

  • Da rekreiramo web aplikaciju repopsi

  • Da publikujemo aplikaciju koristeći Shinyapps.io

Šta je Shiny web aplikacija?

Shiny je paket RStudio-a koji se koristi za pravljenje interaktivnih web aplikacija uz pomoć R programskog jezika.

Možete da napravite aplikaciju na posebnoj web stranici kao što je slučaj sa repopsi ili da vam bude deo R Markdown dokumenta ili da pravite takozvane Shiny dashboards. Možete takođe da unapredite Shiny aplikaciju uz pomoć CSS tema, htmlwidgets-a, ili JavaScript-a.

Shiny aplikacije se lako kreiraju. Nisu neophodne veštine za izradu web stranica. Ali ukoliko ih imate još bolje.

Napravićemo novi projekat

Napravićemo novi projekat

Napravićemo novi projekat

Otvorićemo Shiny aplikaciju

Izgled Shiny aplikacije

app.R

Kod za Shiny aplikaciju ima tri dela:

  1. global kod
  • Gde se importuju biblioteke, pristupa izvoru podataka i gde se podaci sredjuju
  1. UI kod
  • UI (User interface) gde se prilagodjava izgled aplikacije
  1. Server kod
  • Kod koji pokreće aplikaciju, gde se prava magija dešava

Da vidimo kako izgleda pravljenje shiny aplikacije

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Prvo ćemo instalirati shiny paket i ostale pakete koji su neophodni za aplikaciju.

install.packages("shiny") #za shiny aplikaciju

install.packages("shinythemes") # teme koje ulepšavaju izgled aplikacije

install.packages("shinyWidgets") # uredjivanje dugmića ili nekih drugih delova aplikacije

install.packages("tidyverse") # za obradu i pripremanje podataka za vizuelni prikaz

install.packages("DT") # odličan paket za pravljenje tabela

install.packages("gsheet") # koristi se za uvoz google sheets

install.packages("writexl") # koristi se u delu za skidanje podataka u excel formatu

install.packages("httr") # služi za preuzimanje i skidanje podataka u csv-u sa linka

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Potom ćemo uvesti biblioteke koje su nam potrebne

library (shiny)

library (shinythemes)

library (shinyWidgets)

library (tidyverse)

library (gsheet)

library (writexl)

library (httr)

Skinućemo kod originalne aplikacije

Idite na sledeći link.

Global kod

Global deo preuzimanje podataka

Za ovo koristimo gsheet biblioteku

repopsi <- gsheet2tbl("https://docs.google.com/spreadsheets/d/1A6O1d0S7iBYsKVbdBP9AWdYXMWvrN_lCh_oMldCmNsA/edit#gid=0")

Global deo prikaz podataka

Uredjivanje kolona

repopsi <- repopsi[-c(1:8),]

my.names <- repopsi[1,]

colnames(repopsi) <- my.names

repopsi <- repopsi[-1,]

repopsi <- repopsi[,-1]

colnames(repopsi)<-gsub(".$","",colnames(repopsi))

Tabela posle uredjivanja kolona

Važna napomena

  • Da bi gsheet2tbl neophodno je da “Share by link” uključen.
  • Ukoliko promenite google sheet morate da sredite kolone u skladu sa tim.
  • Ukoliko želite da koristite excel potreban vam je drugi paket za uvoz tih podataka a to je readxl::read_xlsx().
  • Ako je excel fajl treba proveriti da li treba sredjivati podatke ili ne.

Dodavanje linkova

repopsi1 <-repopsi
# Koristi se za dodavanje linkova na več postojeće informacije u koloni (to je važno za funkciju datatable)

repopsi1$`Source of the original instrument` <- ifelse(is.na(repopsi1$`Source of the original instrument`), 
                                                       
NA, paste0("<a href='", repopsi1$`Source of the original instrument`, "' target='_blank'>",
                           
repopsi1$`Source of the original instrument`, " </a>"))

# Koristi se za pretvaranje u aktivni link za slanje na email adresu u koloni
repopsi1$`Contact email address` <- ifelse(is.na(repopsi1$`Contact email address`  ),
                                                                 
NA, paste0("<a href='mailto:",repopsi1$`Contact email address`  , "' target='_blank'>",
                                                                            
repopsi1$`Contact email address`  ,"</a>"))

Spajanje kolona i uklanjanje nepotrebnih

repopsi1<- repopsi1%>%
  
  unite(`Instrument name and version`, `Title in English`, Abbreviation, Version, sep = " | ",remove = FALSE, na.rm = TRUE)%>%
  
  select(-c(`Title in English`,Abbreviation,Version))%>%
  
  unite(`Contact person`, `Contact person`, `Contact email address`, sep = " | ",remove = FALSE, na.rm = TRUE) %>%
  
  select(-`Contact email address`) %>%
  
  unite(`Where to find the instrument?`, `Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`, sep = " | ",remove = FALSE,na.rm = TRUE)%>%
  
  select(-c(`Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`))

Menjanje redosleda kolona

repopsi1<- repopsi1%>%
  
  relocate(`Where to find the instrument?`, .after = `Instrument name and version`) %>%
  
  relocate(`Citation of the original instrument`, .after = `Where to find the instrument?`) %>%
  
  relocate(`Citation of the translation/adaptation`, .after = `Citation of the original instrument`) %>%
  
  relocate(Keywords, .after = `Citation of the translation/adaptation`) %>%
  
  relocate(`Contact person`, .after = Keywords)

Originalna tabela i url za skidanje CSV podataka sa drugog sajta 

  #repopsi duplicate for download 

repopsi2 <-repopsi

repopsi2$ID  <-seq.int(nrow(repopsi2))

#URL for CSV download of all data

URL <- "https://osf.io/download/mxrc2/"

UI kod

UI kod

UI se, u slučaju repopsi aplikacije, sastoji od navbarPage koja ima sidebarPanel sa leve i mainPanel sa desne strane.Na ovaj način se uredjuje raspored elemenata aplikacije.

Pre samog sadržaja ovih panela postoji deo koji definiše temu, javaskript koji je važan za global pretragu tabele, css koji uredjuje boje i naslova same aplikacije

Tema i javaskript

Sadržaj myscript.js

www folder

U ovom trenutku bismo pomenuli da www folder postoji da bi se u njega ubacile slike (logoi i slično), ako je kompleksniji css fajl ili javaskript.

Uredjivanje estetike aplikacije

Postoji više načina kako može da se uredjuje aplikacija. Može da se direktno primeni CSS ili HTML ili postoje već neke funkcije u shiny-u koje obavljaju upravo to. Prvo ćemo vam prikazati deo koji se odnosi na sredjivanje estetike a koji se sastoji od CSS-a.Sa tags$ mogu da se uredjuju specifični delovi aplikacije.

Neke od funkcija

  • strong() boldovan tekst

  • a(“tekst”/slika, href=“link”) linkovan tekst

  • style="" uredjivanje položaja boje slike, teksta i slicno

  • h2(),h3(),h4(),h5(), h6() veličina teksta

  • br() razmak

  • img() slika

  • align="" levo, desno, justified, centriran tekst

Korisni linkovi i kontakt

Hvala mnogo na pažnji!